<template>
  <div>
    <div class="music-rank-container">
      <Title title="音乐榜单" />

      <van-tabs v-model="active">
        <van-tab title="热歌榜">
          <MusicRankList :type="2"></MusicRankList>
        </van-tab>
        <van-tab title="新歌榜">
          <MusicRankList :type="1"></MusicRankList>
        </van-tab>
        <van-tab title="King榜">
          <MusicRankList :type="25"></MusicRankList>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import Title from "./Title.vue";
import MusicRankList from "./MusicRankList.vue";
export default {
  data() {
    return {
      active: 0
    };
  },
  components: {
    Title,
    MusicRankList
  }
};
</script>

<style lang="less" scoped>
.music-rank-container {
  padding: 10px;
}

// 可以通过/deep/ 或者 ::v-deep
/deep/ .van-tab__text {
  font-size: 14px;
}
</style>